<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人主页</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 自定义样式 */
        body {
            background-color: #f8f9fa;
        }
        .hero-section {
            background: linear-gradient(rgba(0, 0, 0, 0.7), url('img/hero-bg.jpg');
            background-size: cover;
            background-position: center;
            color: white;
            padding: 100px 0;
            margin-bottom: 30px;
        }
        .profile-img {
            width: 150px;
            height: 150px;
            object-fit: cover;
            border: 5px solid white;
        }
        .skill-bar {
            height: 10px;
            margin-bottom: 20px;
        }
        .carousel-item img {
            height: 400px;
            object-fit: cover;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            transition: all 0.3s ease;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .login-container {
            max-width: 500px;
            margin: 50px auto;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            background-color: white;
        }
        .nav-pills .nav-link.active {
            background-color: #0d6efd;
        }
    </style>
</head>
<body>
    <!-- 登录页面 (默认隐藏) -->
    <div id="login-page" class="login-container" style="display: none;">
        <div class="text-center mb-4">
            <i class="fas fa-user-circle fa-5x text-primary mb-3"></i>
            <h2>用户登录</h2>
        </div>
        <form id="login-form">
            <div class="mb-3">
                <label for="username" class="form-label">用户名</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="fas fa-user"></i></span>
                    <input type="text" class="form-control" id="username" placeholder="请输入用户名" required>
                </div>
            </div>
            <div class="mb-3">
                <label for="password" class="form-label">密码</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="fas fa-lock"></i></span>
                    <input type="password" class="form-control" id="password" placeholder="请输入密码" required>
                </div>
            </div>
            <div class="mb-3 form-check">
                <input type="checkbox" class="form-check-input" id="remember">
                <label class="form-check-label" for="remember">记住我</label>
            </div>
            <button type="submit" class="btn btn-primary w-100 mb-3">登录</button>
            <div class="text-center">
                <a href="#" class="text-decoration-none" onclick="showRegisterForm()">注册新账号</a> | 
                <a href="#" class="text-decoration-none">忘记密码?</a>
            </div>
        </form>
        
        <!-- 注册表单 (默认隐藏) -->
        <form id="register-form" style="display: none;">
            <div class="text-center mb-4">
                <i class="fas fa-user-plus fa-5x text-primary mb-3"></i>
                <h2>用户注册</h2>
            </div>
            <div class="mb-3">
                <label for="reg-username" class="form-label">用户名</label>
                <input type="text" class="form-control" id="reg-username" required>
            </div>
            <div class="mb-3">
                <label for="reg-email" class="form-label">邮箱</label>
                <input type="email" class="form-control" id="reg-email" required>
            </div>
            <div class="mb-3">
                <label for="reg-password" class="form-label">密码</label>
                <input type="password" class="form-control" id="reg-password" required>
            </div>
            <div class="mb-3">
                <label for="reg-confirm-password" class="form-label">确认密码</label>
                <input type="password" class="form-control" id="reg-confirm-password" required>
            </div>
            <button type="submit" class="btn btn-success w-100 mb-3">注册</button>
            <div class="text-center">
                <a href="#" class="text-decoration-none" onclick="showLoginForm()">已有账号? 立即登录</a>
            </div>
        </form>
    </div>

    <!-- 个人介绍页面 (默认显示) -->
    <div id="profile-page">
        <!-- 导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
            <div class="container">
                <a class="navbar-brand" href="#">
                    <i class="fas fa-user me-2"></i>我的个人主页
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav me-auto">
                        <li class="nav-item">
                            <a class="nav-link active" href="#home"><i class="fas fa-home me-1"></i>首页</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#about"><i class="fas fa-info-circle me-1"></i>关于我</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#skills"><i class="fas fa-code me-1"></i>技能</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#portfolio"><i class="fas fa-briefcase me-1"></i>作品集</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#contact"><i class="fas fa-envelope me-1"></i>联系我</a>
                        </li>
                    </ul>
                    <button class="btn btn-outline-light" onclick="showLoginPage()">
                        <i class="fas fa-sign-in-alt me-1"></i>登录
                    </button>
                </div>
            </div>
        </nav>

        <!-- 英雄区域 -->
        <section id="home" class="hero-section text-center">
            <div class="container">
                <img src="img/profile.jpg" alt="个人照片" class="profile-img rounded-circle mb-3">
                <h1 class="display-4 fw-bold">张三</h1>
                <p class="lead">前端开发工程师 | UI设计师 | 摄影爱好者</p>
                <div class="mt-4">
                    <a href="#contact" class="btn btn-light btn-lg me-2"><i class="fas fa-paper-plane me-1"></i>联系我</a>
                    <a href="#about" class="btn btn-outline-light btn-lg"><i class="fas fa-user me-1"></i>关于我</a>
                </div>
            </div>
        </section>

        <!-- 关于我部分 -->
        <section id="about" class="py-5 bg-white">
            <div class="container">
                <h2 class="text-center mb-5"><i class="fas fa-user me-2"></i>关于我</h2>
                <div class="row">
                    <div class="col-lg-6">
                        <h3>个人简介</h3>
                        <p>我是一名有3年前端开发经验的工程师，擅长HTML5、CSS3和JavaScript，熟悉Vue.js和React框架。我对用户体验设计有浓厚的兴趣，并致力于创建响应式、用户友好的网页应用。</p>
                        <p>在工作之余，我喜欢摄影和旅行，这些爱好帮助我培养了良好的审美观和创造力。</p>
                        
                        <div class="mt-4">
                            <h4>基本信息</h4>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <i class="fas fa-birthday-cake me-2"></i>
                                    <strong>年龄:</strong> 28岁
                                </li>
                                <li class="list-group-item">
                                    <i class="fas fa-map-marker-alt me-2"></i>
                                    <strong>地点:</strong> 北京, 中国
                                </li>
                                <li class="list-group-item">
                                    <i class="fas fa-graduation-cap me-2"></i>
                                    <strong>学历:</strong> 清华大学计算机科学硕士
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <h3>我的技能</h3>
                        <div class="mb-3">
                            <label>HTML5/CSS3</label>
                            <div class="progress skill-bar">
                                <div class="progress-bar bg-success" role="progressbar" style="width: 95%"></div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label>JavaScript</label>
                            <div class="progress skill-bar">
                                <div class="progress-bar bg-info" role="progressbar" style="width: 90%"></div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label>Vue.js</label>
                            <div class="progress skill-bar">
                                <div class="progress-bar bg-warning" role="progressbar" style="width: 85%"></div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label>React</label>
                            <div class="progress skill-bar">
                                <div class="progress-bar bg-danger" role="progressbar" style="width: 80%"></div>
                            </div>
                        </div>
                        
                        <div class="mt-4">
                            <h4>兴趣爱好</h4>
                            <div class="d-flex flex-wrap">
                                <span class="badge bg-primary me-2 mb-2"><i class="fas fa-camera me-1"></i>摄影</span>
                                <span class="badge bg-secondary me-2 mb-2"><i class="fas fa-plane me-1"></i>旅行</span>
                                <span class="badge bg-success me-2 mb-2"><i class="fas fa-book me-1"></i>阅读</span>
                                <span class="badge bg-danger me-2 mb-2"><i class="fas fa-music me-1"></i>音乐</span>
                                <span class="badge bg-warning me-2 mb-2"><i class="fas fa-utensils me-1"></i>烹饪</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 作品集轮播 -->
        <section id="portfolio" class="py-5 bg-light">
            <div class="container">
                <h2 class="text-center mb-5"><i class="fas fa-briefcase me-2"></i>我的作品</h2>
                
                <div id="portfolioCarousel" class="carousel slide" data-bs-ride="carousel">
                    <div class="carousel-indicators">
                        <button type="button" data-bs-target="#portfolioCarousel" data-bs-slide-to="0" class="active"></button>
                        <button type="button" data-bs-target="#portfolioCarousel" data-bs-slide-to="1"></button>
                        <button type="button" data-bs-target="#portfolioCarousel" data-bs-slide-to="2"></button>
                    </div>
                    <div class="carousel-inner rounded">
                        <div class="carousel-item active">
                            <img src="img/project1.jpg" class="d-block w-100" alt="项目1">
                            <div class="carousel-caption d-none d-md-block bg-dark bg-opacity-75 rounded">
                                <h5>电商网站设计</h5>
                                <p>使用Vue.js和Element UI开发的响应式电商平台</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img src="img/project2.jpg" class="d-block w-100" alt="项目2">
                            <div class="carousel-caption d-none d-md-block bg-dark bg-opacity-75 rounded">
                                <h5>企业管理系统</h5>
                                <p>基于React和Ant Design的后台管理系统</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img src="img/project3.jpg" class="d-block w-100" alt="项目3">
                            <div class="carousel-caption d-none d-md-block bg-dark bg-opacity-75 rounded">
                                <h5>个人博客系统</h5>
                                <p>使用Node.js和MongoDB构建的全栈博客应用</p>
                            </div>
                        </div>
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#portfolioCarousel" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#portfolioCarousel" data-bs-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </button>
                </div>
                
                <div class="row mt-5">
                    <div class="col-md-4 mb-4">
                        <div class="card card-hover h-100">
                            <img src="img/work1.jpg" class="card-img-top" alt="工作1">
                            <div class="card-body">
                                <h5 class="card-title">阿里巴巴</h5>
                                <h6 class="card-subtitle mb-2 text-muted">高级前端工程师</h6>
                                <p class="card-text">负责核心产品的前端架构设计和开发，带领团队完成多个重要项目。</p>
                                <span class="badge bg-primary">Vue.js</span>
                                <span class="badge bg-secondary">Element UI</span>
                            </div>
                            <div class="card-footer">
                                <small class="text-muted">2020年至今</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 mb-4">
                        <div class="card card-hover h-100">
                            <img src="img/work2.jpg" class="card-img-top" alt="工作2">
                            <div class="card-body">
                                <h5 class="card-title">腾讯科技</h5>
                                <h6 class="card-subtitle mb-2 text-muted">前端开发工程师</h6>
                                <p class="card-text">参与微信小程序开发，使用React开发内部管理系统。</p>
                                <span class="badge bg-primary">React</span>
                                <span class="badge bg-secondary">Redux</span>
                            </div>
                            <div class="card-footer">
                                <small class="text-muted">2017-2020年</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 mb-4">
                        <div class="card card-hover h-100">
                            <img src="img/work3.jpg" class="card-img-top" alt="工作3">
                            <div class="card-body">
                                <h5 class="card-title">百度</h5>
                                <h6 class="card-subtitle mb-2 text-muted">前端实习生</h6>
                                <p class="card-text">参与搜索引擎前端开发，学习大型项目开发流程。</p>
                                <span class="badge bg-primary">AngularJS</span>
                                <span class="badge bg-secondary">jQuery</span>
                            </div>
                            <div class="card-footer">
                                <small class="text-muted">2016-2017年</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 联系我部分 -->
        <section id="contact" class="py-5 bg-white">
            <div class="container">
                <h2 class="text-center mb-5"><i class="fas fa-envelope me-2"></i>联系我</h2>
                <div class="row">
                    <div class="col-lg-6 mb-4">
                        <form>
                            <div class="mb-3">
                                <label for="name" class="form-label">您的姓名</label>
                                <input type="text" class="form-control" id="name" required>
                            </div>
                            <div class="mb-3">
                                <label for="email" class="form-label">电子邮箱</label>
                                <input type="email" class="form-control" id="email" required>
                            </div>
                            <div class="mb-3">
                                <label for="message" class="form-label">留言内容</label>
                                <textarea class="form-control" id="message" rows="5" required></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary">发送消息</button>
                        </form>
                    </div>
                    <div class="col-lg-6">
                        <h4><i class="fas fa-map-marker-alt me-2"></i>我的位置</h4>
                        <div class="ratio ratio-16x9 mb-4">
                            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d392638.7744799175!2d116.1017125!3d39.9385465!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x35f05296e7142cb9%3A0xb9625620af0fa98a!2z5YyX5rGf5Yy65YyX5rGf5biC!5e0!3m2!1szh-CN!2sus!4v1620000000000!5m2!1szh-CN!2sus" allowfullscreen="" loading="lazy"></iframe>
                        </div>
                        <ul class="list-unstyled">
                            <li class="mb-2">
                                <i class="fas fa-envelope me-2"></i>
                                <a href="mailto:zhangsan@example.com">zhangsan@example.com</a>
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-phone me-2"></i>
                                <a href="tel:+8613812345678">+86 138 1234 5678</a>
                            </li>
                            <li class="mb-2">
                                <i class="fab fa-github me-2"></i>
                                <a href="https://github.com/zhangsan" target="_blank">github.com/zhangsan</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <!-- 页脚 -->
        <footer class="bg-dark text-white py-4">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 text-center text-md-start">
                        <p class="mb-0">&copy; 2023 张三的个人主页. 保留所有权利.</p>
                    </div>
                    <div class="col-md-6 text-center text-md-end">
                        <a href="#" class="text-white me-3"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="text-white me-3"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="text-white me-3"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#" class="text-white"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
        </footer>
    </div>

    <!-- Bootstrap JS 和依赖 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 页面切换功能
        function showLoginPage() {
            document.getElementById('profile-page').style.display = 'none';
            document.getElementById('login-page').style.display = 'block';
            document.getElementById('login-form').style.display = 'block';
            document.getElementById('register-form').style.display = 'none';
        }
        
        function showProfilePage() {
            document.getElementById('login-page').style.display = 'none';
            document.getElementById('profile-page').style.display = 'block';
        }
        
        function showRegisterForm() {
            document.getElementById('login-form').style.display = 'none';
            document.getElementById('register-form').style.display = 'block';
        }
        
        function showLoginForm() {
            document.getElementById('register-form').style.display = 'none';
            document.getElementById('login-form').style.display = 'block';
        }
        
        // 登录表单提交
        document.getElementById('login-form').addEventListener('submit', function(e) {
            e.preventDefault();
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            // 简单验证
            if(username && password) {
                alert('登录成功!');
                showProfilePage();
            } else {
                alert('请输入用户名和密码!');
            }
        });
        
        // 注册表单提交
        document.getElementById('register-form').addEventListener('submit', function(e) {
            e.preventDefault();
            const username = document.getElementById('reg-username').value;
            const email = document.getElementById('reg-email').value;
            const password = document.getElementById('reg-password').value;
            const confirmPassword = document.getElementById('reg-confirm-password').value;
            
            if(password !== confirmPassword) {
                alert('两次输入的密码不一致!');
                return;
            }
            
            if(username && email && password) {
                alert('注册成功! 请登录');
                showLoginForm();
                // 清空表单
                this.reset();
            } else {
                alert('请填写所有必填字段!');
            }
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if(targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if(targetElement) {
                    targetElement.scrollIntoView({
                        behavior: 'smooth'
                    });
                }
            });
        });
    </script>
</body>
</html>